<template>
  <div>
    <van-sticky>
      <van-row type="flex" align="center" class="L-search-bar">
        <van-col :span="2" class="L-text-align-center">
          <i v-show="isShowListViewIcon" class="iconfont icon-dongtaitiaojian L-big-text" @click="handleClickViewOption"></i>
        </van-col>
        <van-col :span="16">
          <van-search v-model="keyword" :placeholder="placeholder" />
        </van-col>
        <van-col :span="3" @click="handleClickSearch">搜索</van-col>
        <van-col :span="3" @click="hanldeClickFilter">
          筛选
        </van-col>
      </van-row>
    </van-sticky>
  </div>
</template>

<script setup lang="ts">
import {defineProps,onMounted,ref,defineEmits,watch} from 'vue'

import emitter from "@/utils/emitter";

const keyword = ref("")

const props = defineProps({
    showPopup:Boolean,
    viewoptionArr:Array,
    isShowFilter:Boolean,
    isShowListViewIcon:{
      type:Boolean,
      default:true
    },
    placeholder:{
      type:String,
      default:"请输入"
    }
})


const emit = defineEmits(['hanldeClickFilter','handleClickViewOption','handleClickSearch','handleInputSearch']);

onMounted(()=>{

})

watch(keyword,(value)=>{
  emit("handleInputSearch",value)

})


function handleClickSearch(){
    emit('handleClickSearch',keyword.value)
}

function hanldeClickFilter(){
    emit('hanldeClickFilter',!props.isShowFilter)
}
function handleClickViewOption(){
    emit('handleClickViewOption',true)
}

function handleSearch(){
    emitter.emit('handleSearch',true)
}





</script>

<style scoped>

</style>